<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8" isELIgnored="false"%>
<%@ include file="/WEB-INF/views/shared/taglib.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<meta name="format-detection" content="telephone=no, email=no"/>
<meta charset="UTF-8">
<title>我的订单</title>
<link rel="stylesheet" href="/apollo/css/aui/core.css">
<link rel="stylesheet" href="/apollo/css/aui/icon.css">
<link rel="stylesheet" href="/apollo/css/aui/home.css">
<link rel="stylesheet" type="text/css" href="/apollo/css/aui/aui-pull-refresh.css">
<link rel="icon" type="image/x-icon" href="favicon.ico">
<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
<style>
.n-tabs {
	position: fixed;
	top:44px;
	left: 0;
	width: 100%;
	height: 41px;
	z-index: 1000;
	background-color: #fff;
	box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
	-webkit-box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
	-moz-box-shadow: 0 0 10PX 0PX rgba(155, 143, 143, 0.6);
}
.n-tabs-a {
	margin:100px 0 0 0;
}
.n-tabs .edge {
	position: fixed;
	top: 0;
	height: 41px;
	width: 100%;
	border-bottom: 1px solid #e5e5e5;
}
.n-tabs .n-tabContainer {
	-webkit-overflow-scrolling: touch;
	position: relative;
	top: 0;
	left: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding-left: 16px;
	/*height: 51px;*/
	font-size: 14px;
	color: #333;
	white-space: nowrap;
}
.n-tabs .n-tabContainer .navtab {
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
}
.n-tabs .n-tabContainer .n-tabItem {
	-webkit-box-flex: 1;
	-webkit-flex-grow: 1;
	flex-grow: 1;
	-webkit-flex-shrink: 0;
	flex-shrink: 0;
	display: inline-block;
	height: 41px;
	line-height: 41px;
	text-align: center;
	margin-left: 20px;
}
.n-tabs .n-tabContainer .n-tabItem:first-child {
	margin-left: 0;
}
.n-tabs .n-tabContainer .n-tabItem .current {
	display: inline-block;
	height: 41px;
	border-bottom: 2px solid #e31436;
	color: #e31436;
}
.n-tabs .n-tabContainera {
	-webkit-overflow-scrolling: touch;
	position: relative;
	top: 0;
	rignt: 0;
	overflow-x: auto;
	overflow-y: hidden;
	height: 51px;
	font-size: 14px;
	color: #333;
	white-space: nowrap;
}
.m-actionsheet {
	text-align: center;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	z-index: 1000;
	background-color: #EFEFF4;
	-webkit-transform: translate(0, 100%);
	transform: translate(0, 100%);
 	-webkit-transition: -webkit-transform .3s;
 	transition: -webkit-transform .3s;
 	transition: transform .3s;
 	transition: transform .3s, -webkit-transform .3s;
}
.actionsheet-toggle {
	-webkit-transform: translate(0, 0);
	transform: translate(0, 0);
}
.actionsheet-item {
	display: block;
	position: relative;
	font-size: 0.8rem;
	color: #555;
	height: 2rem;
	line-height: 2rem;
	background-color: #FFF;
}
.actionsheet-item:after {
	content: '';
	position: absolute;
	z-index: 2;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	border-bottom: 1px solid #D9D9D9;
	-webkit-transform: scaleY(0.5);
	transform: scaleY(0.5);
	-webkit-transform-origin: 0 100%;
	transform-origin: 0 100%;
}
.actionsheet-action {
	display: block;
 	margin-top: .15rem;
	font-size: 0.8rem;
	color: #555;
	height:2rem;
	line-height: 2rem;
	background-color: #FFF;
	position:absolute;
	top:10px;
	right:0;
	padding:0 2px;
}
.dropbtn {
      border: none;
      cursor: pointer;
  }

  .dropbtn:hover, .dropbtn:focus {
      background-color: #FAFAFA;
  }

  .dropdown {
      width: 100%;
      height: 40px;
      position: relative;
      display: inline-block;
  }

  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      overflow: auto;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }

  .dropdown-content a {
      color: black;
      padding: 12px 16px;
      text-decoration: none;
      display: block;
  }

  .dropdown a:hover {background-color: #f1f1f1}

  .show {display:block;}
  .open{
      height: 800px;
background: rgba(0,0,0,.5);
  }
  /*栅格类*/
.aui-row {
	overflow: hidden;
	margin: 0;
}
.aui-row-padded {
	margin-left: -0.125rem;
	margin-right: -0.125rem;
}
.aui-row-padded [class*=aui-col-xs-] {
	padding: 0.125rem;
}
.aui-col-xs-1,.aui-col-xs-2,.aui-col-xs-3,.aui-col-xs-4,.aui-col-xs-5,.aui-col-xs-6,.aui-col-xs-7,.aui-col-xs-8,.aui-col-xs-9,.aui-col-xs-10,.aui-col-xs-11,.aui-col-5 {
	position: relative;
	float: left;
}
.aui-col-xs-12 {
	width: 100%;
	position: relative;
}
.aui-col-xs-11 {
	width: 91.66666667%;
}
.aui-col-xs-10 {
	width: 83.33333333%;
}
.aui-col-xs-9 {
	width: 75%;
}
.aui-col-xs-8 {
	width: 66.66666667%;
}
.aui-col-xs-7 {
	width: 58.33333333%;
}
.aui-col-xs-6 {
	width: 50%;
}
.aui-col-xs-5 {
	width: 41.66666667%;
}
.aui-col-xs-4 {
	width: 33.33333333%;
}
.aui-col-xs-3 {
	width: 25%;
}
.aui-col-xs-2 {
	width: 16.66666667%;
}
.aui-col-xs-1 {
	width: 8.33333333%;
}
.aui-col-5 {
	width: 20%;
}
.collocation{
	display:none;
}
.num{
	justify-content: center;
    align-items: center;
    color: #646464;
    font-weight: bold;
    text-align: center;
    }
    /*toast*/
.aui-toast {
	background: rgba(0, 0, 0, 0.7);
	text-align: center;
	border-radius: 0.25rem;
	color: #ffffff;
	position: fixed;
	z-index: 3;
	top: 45%;
	left: 50%;
	width: 7.5em;
	min-height: 6em;
	margin-left: -3.75em;
	margin-top: -4rem;
	display: none;
}
.aui-toast .aui-iconfont {
	margin-top: 0.2rem;
	display: block;
	font-size: 2.6rem;
}
.aui-toast-content {
  margin: 0 0 0.75rem;
}
.aui-toast-loading {
    background-color: #ffffff;
    border-radius: 100%;
    margin: 0.75rem 0;
    -webkit-animation-fill-mode: both;
        	animation-fill-mode: both;
    border: 2px solid #ffffff;
    border-bottom-color: transparent;
    height: 2.25rem;
    width: 2.25rem;
    background: transparent !important;
    display: inline-block;
    -webkit-animation: rotate 1s 0s linear infinite;
        	animation: rotate 1s 0s linear infinite;
}
@font-face {
	font-family: "aui_iconfont";
	src: url('aui-iconfont.ttf') format('truetype');
}
.aui-iconfont {
	position: relative;
	font-family:"aui_iconfont" !important;
	font-size: 0.7rem;
	font-style:normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.aui-icon-laud:before { content: "\e64b"; }

/*标签*/
.aui-label {
	display: inline-block;
	padding: 0.2em 0.25em;
	font-size: 0.6rem;
	line-height: 1;
	color: #616161;
    background-color: #dddddd;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	border-radius: 0.15em;
	position: relative;
}

.aui-label-primary {
	color: #ffffff;
	background-color: #00bcd4;
}
.aui-label-success {
	color: #ffffff;
	background-color: #009688;
}
.aui-label-info {
  color: #ffffff;
  background-color: #03a9f4;
}
.aui-label-warning {
	color: #ffffff;
	background-color: #ffc107;
}
.aui-label-danger {
	color: #ffffff;
	background-color: #e51c23;
}
.aui-label-outlined {
	background-color: transparent;
	position: relative;
}
.aui-label-outlined:after {
    -webkit-border-radius: 2px;
    border-radius: 2px;
    height: 200%;
    content: '';
    width: 200%;
	border: 1px solid #d9d9d9;
    position: absolute;
    top: -1px;
    left: -1px;
    transform: scale(0.5);
    -webkit-transform: scale(0.5);
    transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    z-index: 1;
}
.aui-label-outlined.aui-label-primary,
.aui-label-outlined.aui-label-primary:after {
	color: #00bcd4;
	border-color: #00bcd4;
}
.aui-label-outlined.aui-label-success,
.aui-label-outlined.aui-label-success:after {
	color: #009688;
	border-color: #009688;
}
.aui-label-outlined.aui-label-info,
.aui-label-outlined.aui-label-info:after {
  	color: #03a9f4;
  	border-color: #03a9f4;
}
.aui-label-outlined.aui-label-warning,
.aui-label-outlined.aui-label-warning:after {
	color: #ffc107;
	border-color: #ffc107;
}
.aui-label-outlined.aui-label-danger,
.aui-label-outlined.aui-label-danger:after {
	color: #e51c23;
	border-color: #e51c23;
}
.aui-label .aui-iconfont {
	font-size: 0.6rem;
}

</style>
</head>
<body>
<header class="aui-header-default aui-header-fixed aui-header-bg">
 <a href="javascript:history.back(-1)" class="aui-header-item"> <i class="aui-icon aui-icon-back-white"></i> </a>
  <div class="aui-header-center aui-header-center-clear">
    <div class="aui-header-center-logo">
      <div class="aui-car-white-Typeface">订单详情</div>
    </div>
  </div>
  <a href="#" class="aui-header-item-icon"   style="min-width:0"> <i class="aui-icon aui-icon-member"></i> </a> 
</header>
<div id="tableContent" class="aui-refresh-content" style="background-color:#f5f5f5;">
	<div style="height:50px"></div>
  	<section class="aui-card-content" style="margin-top:5px" >
	  <div class="aui-card-media">
	    <div class="aui-card-media-inner">
	      <div class="aui-list-product-item-text" >
	      <div class="aui-label aui-label-info" style="float:right"><t:provider packageName="billing" enumClassName="BillingConfirm" value="${billing.confirm}"/></div>
	        <h2>订单号：${billing.billingNo }</h2>
	        <div class="aui-list-product-mes-box">        
	         	<div class="aui-list-product-item-del-text">下单时间：<fmt:formatDate value="${billing.createDate}" type="date" dateStyle="default" pattern="yyyy-MM-dd HH:mm"/></div>
	       	</div>
	      </div>	      
	    </div>
	  </div>
	</section>
	<section class="aui-card-content" style="margin-top:5px" >
	  <div class="aui-card-media">
	
	    <div class="aui-card-media-inner">
	      <div class="aui-list-product-item-text" >
	      <div class="aui-label aui-label-info" style="float:right"><t:provider packageName="billing" enumClassName="BillingState" value="${billing.billingState}"/></div>
	        <div class="aui-list-product-mes-box">        
	         	<div class="aui-list-product-item-del-text">发货状态：</div>
	       	</div>
	        <div class="aui-list-product-mes-box">    
	        	<c:if test="${billing.customer.customerName!=null }">
	        		<div class="aui-list-product-item-del-text">${billing.customer.customerName}：${billing.customer.customerTel}</div>
	        	</c:if>    
	         	<c:if test="${billing.customer.nickName!=null&&billing.customer.customerName==null }">
	        		<div class="aui-list-product-item-del-text">${billing.customer.nickName}：${billing.customer.customerTel}</div>
	        	</c:if>  
	       	</div>
	      </div>	      
	    </div>
	  </div>
	</section>
	<section class="aui-card-content" style="margin-top:5px" >
	  <div class="aui-card-media">
	    <div class="aui-card-media-inner">
	      <div class="aui-list-product-item-text" >
	        <div class="aui-list-product-mes-box">        
	         	<div class="aui-list-product-item-del-text">商品列表：</div>
	         	<div class="aui-list-product-item-del-text">${shop.shopName }</div>
	       	</div>
	        
	      </div>	      
	    </div>
	  </div>
	  <c:forEach var="outStockShow" items="${billing.outStock.outStockShows}">
		<c:forEach var="outStockCollocation" items="${outStockShow.outStockCollocations}" >
	  <div class="aui-card-media">
	    <div class="aui-card-media-item" onclick="window.open('/apollo/wechat/shop/product?cargoId=${outStockShow.cargo.cargoId }','_self')"> 
	    	 <c:if test="${cargo.fileId==null }">
				<img src="" style="height:80px;width:80px;text-align:center" alt="暂无图片">
			</c:if>	
			<c:if test="${cargo.fileId!=null }">
				<img name="pictureLoad" data-url="${tfile:getImageUrl(cargo.fileId)}" style="height:80px;width:80px"  alt="">
			</c:if>
	    </div>
	    <div class="aui-card-media-inner">
	      <div class="aui-list-product-item-text" onclick="window.open('/apollo/wechat/shop/product?cargoId=${outStockShow.cargo.cargoId}','_self')">
	        <h2>${outStockShow.cargo.cargoName}</h2>
	        <div> 
				<span class="aui-list-product-item-price"> <em>¥</em> ${outStockCollocation.realPrice } </span> 
	        </div>
	        <div class="aui-list-product-mes-box">
		        <div><span class="aui-list-product-item-del-text">数量： ${outStockCollocation.collocationNum } </span></div>
	        </div>
	        <div class="aui-list-product-mes-box">        
	         	<div class="aui-list-product-item-del-text">规格：${outStockCollocation.collocation.propertyNameOne}/${outStockCollocation.collocation.propertyNameTwo}</div>
	       	</div>
	      </div>	        
	    </div>
	    
	  </div>
	  </c:forEach>
	  </c:forEach>
	  <div class="aui-card-media">
	
	    <div class="aui-card-media-inner">
	      <div class="aui-list-product-item-text" >
	        <div class="aui-list-product-mes-box">        
	         	<div class="aui-list-product-item-del-text">备注信息：${billing.comment }</div>
	       	</div>
	      </div>	      
	    </div>
	  </div>
	</section>
	
</div>


<div style="height:50px"></div>
<input style="display:none" class="shopId" value="${shop.shopId }">

<footer class="aui-footer-default aui-footer-fixed" style="height:50px"> 
	<a style="text-aligin:center;font-size:1.4em;color:red;margin-left:20px">合计：</a>
	<a>￥${billing.billingMoney}（共${billing.typeNum }种货品， 总数量：${billing.totalNum }）</a>
</footer>

<script type="text/javascript" src="/apollo/js/common/jquery.min.js"></script> 
<script type="text/javascript" src="/apollo/js/aui/aui.js"></script> 
<script type="text/javascript" src="/apollo/js/aui/aui-toast.js"></script> 
<script type="text/javascript" src="/apollo/js/aui/aui-pull-refresh.js"></script>
<script>

var toast = new auiToast();
function showDefault(type){
    switch (type) {
    case "success":
        toast.success({
            title:"提交成功",
            duration:2000
        });
        break;
        case "fail":
            toast.fail({
                title:"提交失败",
                duration:2000
            });
            break;
        case "custom":
            toast.custom({
                title:"提交成功",
                html:'<i class="aui-iconfont aui-icon-laud"></i>',
                duration:2000
            });
            break;
      
        default:
           
            break;
    }
}


window.onload=function (){
	pictureLoad();
}
function pictureLoad(){
	$("img[name='pictureLoad']").each(function(){
	    var url=$(this).data("url");
	    $(this).attr("src",url);
	});
}
</script>

<script type="text/javascript" >
var pageIndex = 1;
$(document).scroll(function(){
	if  ($(document).scrollTop() >= $(document).height() - $(window).height()) {
		var searchKey=$("#searchKey").val();
		
		pageIndex++;
		var shopId=$(".shopId").val();
		var url=$.getVirtualPath()+"/wechat/order/orderList?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId+"&searchKey="+searchKey;
		var content=$.getText(url);
		
		$("#tableContent").append(content);
		
		
	}
});

</script> 
<script type="text/javascript">
var pullRefresh = new auiPullToRefresh({
	container: document.querySelector('.aui-refresh-content'),
	triggerDistance: 100
},function(ret){
	if(ret.status=="success"){
		setTimeout(function(){
			var shopId=$(".shopId").val();
			url=$.getVirtualPath()+"/wechat/shop/find?pageIndex="+pageIndex+"&pageSize=20"+"&ajaxPost=true"+"&shopId="+shopId;
			var content=$.getText(url);
			pullRefresh.cancelLoading(); //刷新成功后调用此方法隐藏
		},1500)
	}
})
</script>

</body>
</html>
<%@ include file="/WEB-INF/views/shared/scripts/jquery.jsp" %>
<%@ include file="/WEB-INF/views/shared/base/scripts/jqueryui.jsp"%>
